<template>
  <!-- 我的咨询 -->
  <div class="my-consulting">
    <Tabs value="all" @on-click="change">
      <TabPane
        v-for="item in tabsArr"
        :key="item.name"
        :label="item.label"
        :name="item.name"
        :data="array1"
      >
        <div class="all-content">
          <Table border :columns="columns1" :data="array1">
            <template slot-scope="{ row }" slot="order">
              <div class="expertItem">
                <img
                  :src="row.expert.face"
                  alt=""
                  style="
                    width: calc(150 / 1920 * 100vw);
                    height: calc(150 / 1920 * 100vw);
                  "
                />
                <div class="expertInfo">
                  <div>{{ row.expert.realName }}</div>
                  <div>{{ row.description }}</div>
                </div>
              </div>
            </template>
            <template slot-scope="{ row }" slot="time" class="card">
              <div>{{ row.createTime }}</div>
            </template>
            <template slot-scope="{ row }" slot="status" class="card">
              <div>
                <span class="round" :class="formatStatus(row.status)"></span>
                <span>{{
                  row.status == -1
                    ? "待支付"
                    : row.status == 0
                    ? "待回复"
                    : row.status == 1
                    ? "进行中"
                    : row.status == 2
                    ? "已结束"
                    : "已取消"
                }}</span>
              </div>
            </template>
            <template slot-scope="{ row }" slot="operation">
              <div v-if="row.status == 2 && row.isEvaluate == '1'" class="btn-y" @click="handelEvaluation(row)">
                立即评价
              </div>
              <div
                v-if="row.status == -1 || row.status == 0"
                class="btn-g"
                @click="handleCencel(row)"
              >
                取消预约
              </div>
              <div
                v-if="row.status == 0 || row.status == 1"
                class="btn-r"
                @click="handleIm(row)"
              >
                进入咨询
              </div>
              <div v-if="row.status == 2" class="btn-y" @click="handleIm(row)">
                查看详情
              </div>
            </template>
          </Table>
          <div class="page">
            <Page
              :total="total"
              :page-size="param.rows"
              size="small"
              show-sizer
              show-total
              show-elevator
              @on-change="currentHandle"
              @on-page-size-change="sizeChange"
            />
          </div>
        </div>
      </TabPane>
    </Tabs>
    <!-- 增加弹框 -->
    <Modal
      v-model="evaluationModal"
      title="评价"
      width="500"
      @on-ok="ok"
      @on-cancel="cancel"
    >
      <Form
        ref="form"
        :model="form"
        :rules="ruleInline"
        :label-width="120"
        style="width: 90%"
      >
        <FormItem prop="grade" label="课程评分">
          <Rate v-model="form.grade" />
        </FormItem>
        <FormItem prop="userEvaluate" label="课程评价">
          <i-input
            v-model="form.userEvaluate"
            clearable
            maxlength="500"
            :rows="5"
            show-word-limit
            type="textarea"
            placeholder="课程怎么样？快来说说学习感受吧~"
          >
          </i-input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="error" size="large" @click="submit">发表</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import * as getConsult from "@/api/myConsultingg.js";
export default {
  components: {},
  data() {
    return {
      evaluationModal: false,
      total: 0,
      // 表格标题
      columns1: [
        {
          title: "提供服务",
          key: "order",
          minWidth: 250,
          slot: "order",
        },
        {
          title: "问诊时间",
          key: "time",
          slot: "time",
          align: "center",
        },
        {
          title: "状态",
          slot: "status",
          key: "status",
          align: "center",
        },
        {
          title: "操作",
          key: "operation",
          slot: "operation",
          align: "center",
        },
      ],
      array1: [],
      param: {
        status: null,
        page: 1,
        rows: 10,
      },
      tabsArr: [
        {
          label: "全部",
          name: "all",
        },
        {
          label: "待回复",
          name: "0",
        },
        {
          label: "进行中",
          name: "1",
        },
        {
          label: "已结束",
          name: "2",
        },
        {
          label: "已取消",
          name: "3",
        },
      ],
      form: {
        grade: 0,
        userEvaluate: "",
        expertId: "",
        userId: "",
        userConsultId: "",
      },
      ruleInline: {},
    };
  },
  mounted() {
    this.getConsultList();
  },
  methods: {
    formatStatus(status) {
      let str = "";

      switch (status) {
        case 0:
          str = "gray";
          break;
        case 0:
          str = "orange";
          break;
        case 1:
          str = "red";
          break;
        case 2:
          str = "greenColor";
          break;
        case 3:
          str = "gray";
          break;
        default:
      }
      return str;
    },
    sizeChange(size) {
      this.page.rows = size;
      this.getConsultList();
    },
    //获取当前页码
    currentHandle(current) {
      this.params.page = current;
      this.getConsultList();
    },
    // 取消预约
    handleCencel(row) {
      this.$Modal.confirm({
        title: "确认取消",
        content: "确认要取消此预约?",
        loading: true,
        onOk: () => {
          getConsult
            .cencelOrder(row.id)
            .then((res) => {
              if (res.code == 200) {
                this.$Message.success("已取消");
                this.getConsultList();
              }
            })
            .finally(() => {
              this.$Modal.remove();
            });
        },
      });
    },
    // 进入咨询
    handleIm(row) {
      let routeData = this.$router.resolve({
        path: "/onlineConsultingDetails",
        query: {
          user_id: row.expertId,
        },
      });
      window.open(routeData.href, "_blank");
    },
    // 评论
    handelEvaluation(row) {
      this.form.expertId = row.expertId;
      this.form.userId = row.userId;
      this.form.userConsultId = row.id;
      this.evaluationModal = true;
    },
    //获取当前页码
    currentHandle(current) {
      this.param.page = current;
      this.getConsultList();
    },
    getConsultList() {
      getConsult.getList(this.param).then((res) => {
        const {
          code,
          result: { list, total },
        } = res;
        if (code == 200) {
          this.total = total;
          this.array1 = list;
        }
      });
    },
    change(v) {
      this.param.status = v == "all" ? null : v;
      this.getConsultList();
    },
    cancel() {
      this.evaluationModal = false;
      this.form = {
          grade: 0,
          userEvaluate: "",
          expertId: "",
          userId: "",
          userConsultId: "",
      }
    },
    ok() {
      this.evaluationModal = false;
    },
    // 发表
    submit() {
      getConsult.evaluation(this.form).then((res) => {
        const { code, message } = res;
        if (code == 200) {
          this.$Message.success("评价成功");
          this.getConsultList();
          this.evaluationModal = false;
        } else {
          this.$Message.error(message);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.my-consulting {
  width: calc(1650 / 1920 * 100vw);
  background: #fff;
  position: absolute;
  top: calc(288 / 1920 * 100vw);
  left: calc(240 / 1920 * 100vw);
  padding: calc(10 / 1920 * 100vw) calc(40 / 1920 * 100vw) calc(40 / 1920 * 100vw);
}
.all-content {
  width: 100%;
  display: flex;
  flex-direction: column;

  .page {
    margin-left: auto;
    margin-top: calc(40 / 1920 * 100vw);
  }
}
.expertItem {
  display: flex;
  .expertInfo {
    margin-left: calc(30 / 1920 * 100vw);
    margin-top: calc(20 / 1920 * 100vw);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
}
// 状态区分颜色
.orange {
  background: #ffb445 !important;
}
.red {
  background: #fd5151 !important;
}
.gray {
  background: #ededed !important;
}
.round {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background: #fff;
  margin-right: 5px;
}
.btn-y {
  cursor: pointer;
  color: #ffb445;
}
.btn-g {
  cursor: pointer;
  color: #7f7f7f;
}
.btn-r {
  cursor: pointer;
  color: #ff5c58;
}
</style>
